<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand"/>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <title>碧叶之源</title>
<#--<meta name="keywords" content="关键词,5个左右,单个8汉字以内">-->
    <meta name="keywords" content="用户其他信息"/>
<#--<meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">-->
    <meta name="description" content="欢迎进入碧叶之源！"/>


<#--妹子UI-->
    <link type="text/css" rel="stylesheet" href="/plugin/amaze/css/amazeui.min.css"/>
    <link type="text/css" rel="stylesheet" href="/plugin/amaze/css/amazeui.datatables.min.css"/>
    <link type="text/css" rel="stylesheet" href="/plugin/amaze/css/app.css">
    <#--组织架构树-->
    <link type="text/css" rel="stylesheet" href="/plugin/orgchart/css/jquery.orgchart.css">
    <link type="text/css" rel="stylesheet" href="/plugin/orgchart/attach/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="/plugin/orgchart/attach/style.css">

<#--自己的样式-->
    <link type="text/css" rel="stylesheet" href="/css/ztree/main.css">
    <style type="text/css">

        /*组织机构图的样式*/
        /*亲人*/
        .Love {
            stroke: #FF0000;
        }
        /*朋友*/
        .friend{
            stroke: #00FF00;
        }
        /*同事*/
        .colleague{
            stroke: #FFFF00;
        }
        /*客户*/
        .client{
            stroke: #0000FF;
        }
        /*老板*/
        .boss{
            stroke: orange;
        }
        /*陌生人*/
        .stranger{
            stroke: #909090;
        }
        /*利益*/
        .interest{
            stroke: #FF00FF;
        }
        /*其他*/
        .other{
            stroke: #3399FF;
        }

        .second-menu{
            /*隐藏*/
            display:none;
        }


        /*图标背景颜色*/
        .orgchart { background: #4F4F4F; }
        .orgchart td.left, .orgchart td.right, .orgchart td.top { border-color: #aaa; }
        .orgchart td>.down { background-color: #aaa; }
        .orgchart .middle-level .title { background-color: #006699; }
        .orgchart .middle-level .content { border-color: #006699; }
        .orgchart .product-dept .title { background-color: #009933; }
        .orgchart .product-dept .content { border-color: #009933; }
        .orgchart .rd-dept .title { background-color: #993366; }
        .orgchart .rd-dept .content { border-color: #993366; }
        .orgchart .pipeline1 .title { background-color: #996633; }
        .orgchart .pipeline1 .content { border-color: #996633; }
        .orgchart .frontend1 .title { background-color: #cc0066; }
        .orgchart .frontend1 .content { border-color: #cc0066; }
    </style>

</head>


<body>


<body data-type="widgets">

<div class="am-g tpl-g">


    <div class="row-content am-cf">


        <div class="row">

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title am-fl"><span style="color: red">${userRelation.name!''}</span> 的社会关系信息</div>
                        <div class="widget-function am-fr">
                            <a href="javascript:;" class="am-icon-cog"></a>
                        </div>
                    </div>


                    <div class="widget-body am-fr" >

                        <div class="am-u-sm-12" >
                            <#--锚点-->
                            <div id="anchorTop"></div>
                            <input type="hidden" id="userId" name="userId" value="${userId!''}" />
                            <input type="hidden" id="postId" name="postId" value="${postId!''}" />

                            <#--组织架构的容器-->
                            <div id="chart-container" ></div>
                            <br/>
                            <br/>
                            <#--过滤搜索组织架构的图-->
                            <div id="edit-panel" class="am-form tpl-form-border-form tpl-form-border-br">
                                <div class="am-u-sm-3">
                                    <input type="text" id="key-word" placeholder="搜索待过滤的数据" />
                                </div>
                                <div class="am-u-sm-9">
                                    <button type="button" id="btn-filter-node" class="am-btn am-btn-secondary ">搜索</button>
                                    <button type="button" id="btn-cancel" class="am-btn am-btn-secondary ">恢复</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>


        </div>



        <div class="row">

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title am-fl"><span style="color: red">${userRelation.name!''}</span> 的社会关系信息</div>
                        <div class="widget-function am-fr">
                            <a href="javascript:;" class="am-icon-cog"></a>
                        </div>
                    </div>


                    <div class="widget-body am-fr" >


                        <div class="am-u-sm-6">

                            <div class="am-g">
                                <div class="am-u-sm-6">
                                    <div id="anchorDetails">关系信息详情</div>
                                </div>
                            </div>

                            <table width="100%" class="am-table am-table-compact tpl-table-black ">
                                <tr>
                                    <td rowspan="2" colspan="2"><div id="imgHredDetail"></div></td>
                                    <td><div>名字:</div></td>
                                    <td><div id="nameDetail"></div></td>
                                </tr>
                                <tr>
                                    <td><div>性别:</div></td>
                                    <td><div id="sexDetail"></div></td>
                                </tr>
                                <tr>
                                    <td><div>生日:</div></td>
                                    <td><div id="birthdayDetail"></div></td>
                                    <td><div>民族:</div></td>
                                    <td><div id="ethnicDetail"></div></td>
                                </tr>
                                <tr>
                                    <td><div>省:</div></td>
                                    <td><div id="provinceDetail"></div></td>
                                    <td><div>市:</div></td>
                                    <td><div id="cityDetail"></div></td>
                                </tr>
                                <tr>
                                    <td><div>县/区:</div></td>
                                    <td><div id="countyDetail"></div></td>
                                    <td><div>详细地址:</div></td>
                                    <td><div id="addDetailsDetail"></div></td>
                                </tr>
                                <tr>
                                    <td><div>毕业院校:</div></td>
                                    <td><div id="schoolDetail"></div></td>
                                    <td><div>专业:</div></td>
                                    <td><div id="professionDetail"></div></td>
                                </tr>
                                <tr>
                                    <td><div>邮箱:</div></td>
                                    <td><div id="emailDetail"></div></td>
                                    <td><div>身份证:</div></td>
                                    <td><div id="identityDetail"></div></td>
                                </tr>
                                <tr>
                                    <td><div>职业/职位:</div></td>
                                    <td><div id="occupationDetail"></div></td>
                                    <td><div>行业:</div></td>
                                    <td><div id="industryDetail"></div></td>
                                </tr>
                                <tr>
                                    <td><div>是否党员:</div></td>
                                    <td><div id="isPartyDetail"></div></td>
                                    <td><div>入党时间:</div></td>
                                    <td><div id="addPartyDetail"></div></td>
                                </tr>
                                <tr>
                                    <td><div>婚姻状况:</div></td>
                                    <td><div id="loveStateDetail"></div></td>
                                    <td><div>关系:</div></td>
                                    <td><div id="relationshipDetail"></div></td>
                                </tr>
                                <tr>
                                    <td><div>备注:</div></td>
                                    <td colspan="3"><div id="remarkDetail"></div></td>
                                </tr>
                            </table>

                        </div>


                        <div class="am-u-sm-6">

                            <form class="am-form tpl-form-border-form tpl-form-border-br" id="SubsidiaryUserForm">

                                <table width="100%" class="am-table am-table-compact tpl-table-black ">
                                    <tr>
                                        <td>隶属用户</td>
                                        <td>
                                            <input type="hidden" id="userId" name="userId" value="${userId!''}" />
                                            <input type="hidden" id="subsidiaryUserId" name="subsidiaryUserId" value="" />
                                        <#--父节点的id-->
                                            <input type="hidden" id="father" name="father" value="" />
                                            <input type="hidden" id="relationshipId" name="relationshipId" value="" />
                                            <#--锚点-->
                                            <a id="addAnchor" name="addAnchor"></a>
                                        <#--父节点的名字-->
                                            <input type="text" id="fatherName" readonly="readonly" name="fatherName" value=""/>
                                        </td>
                                        <td>头像</td>
                                        <td>
                                            <div id="containerImg" style="width: 75px;height: 75px;border:1px solid #167fa1" >
                                            <#--<#if (userEdit.imgHred!'')?? && ((userEdit.imgHred!'') != "") >-->
                                            <#--<img src="/user/getImgHred?id=${userEdit.imgHred!''}" style="width:75px;height:75px;">-->
                                            <#--<#else >-->
                                                <img src="/img/common/worker.png" style="width:75px;height:75px;">
                                            <#--</#if>-->
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>本地图片上传(优先)</td>
                                        <td>
                                            <input type="file" class="tpl-form-input" id="imgSubsidiaryFile" name="imgSubsidiaryFile" onchange="imgContainerView()"  placeholder="用户头像" />
                                        </td>
                                        <td>网络图片上传</td>
                                        <td>
                                            <input type="text" id="networkUserImg" name="networkUserImg" placeholder="网络图片地址" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>用户关系</td>
                                        <td>
                                            <input type="radio" id="level1" name="level" value="1" /> 亲人
                                            <input type="radio" id="level2" name="level" value="2" /> 朋友
                                            <input type="radio" id="level3" name="level" value="3" /> 同事
                                            <input type="radio" id="level4" name="level" value="4" /> 客户
                                            <input type="radio" id="level5" name="level" value="5" /> boss
                                            <input type="radio" id="level6" name="level" value="6" /> 陌生
                                            <input type="radio" id="level7" name="level" value="7" /> 利益关系
                                            <input type="radio" id="level8" name="level" value="8" /> 其他

                                        </td>
                                        <td>关系说明</td>
                                        <td>
                                            <input type="text" id="explain" name="explain" placeholder="关系说明" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>名字</td>
                                        <td>
                                            <input type="text" id="name" name="name" placeholder="名字" />
                                        </td>
                                        <td>性别</td>
                                        <td>
                                            <input type="radio" id="sex1" name="sex"  value="1" /> 男
                                            <input type="radio" id="sex2" name="sex"  value="2" /> 女
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>生日</td>
                                        <td>
                                            <input type="text" id="birthday" name="birthday" placeholder="生日" />
                                        </td>
                                        <td>民族</td>
                                        <td>
                                            <select onclick="getMovingData(this, &quot;<option class='selectOpenStyle' value='-1'>请选择民族</option>&quot;, &quot;7&quot;, &quot;ethnic&quot;)" id="ethnic" name="ethnic">
                                            <#--<#if ((userEdit.ethnic!'')??) && ((userEdit.ethnic!'') == '')>-->
                                                <option class="selectOpenStyle" value="-1">请选择民族</option>
                                            <#--<#else >-->
                                            <#--<option class="selectOpenStyle" value="${userEdit.ethnic!''}">${baseinfoEthnic.key!''}</option>-->
                                            <#--</#if>-->
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>地区</td>
                                        <td colspan="3">
                                            <div class="am-u-sm-3">
                                                <input type="hidden" id="provinceData" value="${userEdit.province!''}"/>
                                                <input type="hidden" id="cityData" value="${userEdit.city!''}" />
                                                <input type="hidden" id="countyData" value="${userEdit.county!''}" />
                                                省份：<select id="province" name="province" onchange="onProvince()"></select>
                                                城市：<select id="city" name="city" onchange="onCity()"></select>
                                                县区：<select id="county" name="county" onchange="onCounty()"></select>
                                            </div>
                                            <div style="width: 500px;height:480px;border:1px solid #167fa1" id="map" class="am-u-sm-6">
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>详细地址</td>
                                        <td>
                                            <input type="text" id="addDetails" name="addDetails" placeholder="详细地址" />
                                        </td>
                                        <td>婚姻状况</td>
                                        <td>
                                            <input type="radio" id="loveState1" name="loveState" value="1" /> 未婚
                                            <input type="radio" id="loveState2" name="loveState" value="2" /> 已婚
                                            <input type="radio" id="loveState2" name="loveState" value="3" /> 离异
                                            <input type="radio" id="loveState2" name="loveState" value="4" /> 再婚

                                        </td>
                                    </tr>
                                    <tr>
                                        <td>毕业院校</td>
                                        <td>
                                            <input type="text" id="school" name="school" placeholder="毕业院校" />
                                        </td>
                                        <td>专业</td>
                                        <td>
                                            <input type="text" id="profession" name="profession" placeholder="专业" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>邮箱</td>
                                        <td>
                                            <input type="text" id="email" name="email" placeholder="邮箱" />
                                        </td>
                                        <td>身份证</td>
                                        <td>
                                            <input type="text" id="identity" name="identity" placeholder="身份证" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>行业</td>
                                        <td>
                                            <input type="text" id="industry" name="industry" placeholder="行业" />
                                        </td>
                                        <td>职业/职位</td>
                                        <td>
                                            <input type="text" id="occupation" name="occupation" placeholder="职业/职位" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>是否党员</td>
                                        <td>
                                            <input type="radio" id="isParty1" name="isParty" value="1" /> 是党员
                                            <input type="radio" id="isParty2" name="isParty" value="2" /> 非党员
                                        </td>
                                        <td>入党时间</td>
                                        <td>
                                            <input type="text" id="addParty" name="addParty"  />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>备注</td>
                                        <td colspan="3">
                                            <textarea id="remark" name="remark"></textarea>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="4" style="text-align: center;">
                                            <input type="button" class="am-btn am-btn-success" value="新增|修改" onclick="addOrUpdSubsidiaryUser()"/>
                                            <input type="button" class="am-btn am-btn-danger" onclick="clearForm('SubsidiaryUserForm')" value="清空数据" />
                                        </td>
                                    </tr>
                                </table>


                            </form>
                        </div>


                    </div>
                </div>
            </div>


        </div>


    </div>








<#--JS 部分 -->
    <script type="text/javascript" src="/js/common/jquery.min.js"></script>
    <script type="text/javascript" src="/js/common/base.js"></script>
<#--妹子UI-->
    <script type="text/javascript" src="/plugin/amaze/js/amazeui.min.js"></script>
    <script type="text/javascript" src="/plugin/amaze/js/app.js"></script>
    <script type="text/javascript" src="/plugin/amaze/js/theme.js"></script>
<#--layer.js，只需要引入这个，css会自动引入-->
    <script type="text/javascript" src="/plugin/layer-v3.1.1/layer.js"></script>
<#--laydate.js 时间组件-->
    <script type="text/javascript" src="/plugin/laydate/laydate.js"></script>
    <#--组织机构的JS-->
    <script type="text/javascript" src="/plugin/orgchart/js/jquery.orgchart.js"></script>
    <#--组织机构导出功能需要的JS-->
    <script type="text/javascript" src="/plugin/orgchart/attach/html2canvas.min.js"></script>


<#--地图的数据-->
    <script type="text/javascript" src="/plugin/map/area.js"></script>
<#--百度地图js-->
    <script type="text/javascript" src="/plugin/map/map.js"></script>
<#--三级联动的JS-->
    <script type="text/javascript" src="/plugin/map/provincialCitiesAndCounties.js"></script>

<#--自己的js-->
    <script type="text/javascript" src="/js/user/subsidiaryUser.js"></script>

    <script type="text/javascript">


        $(function() {

            /**
             * 进入后自动触发
             */
            getUserRelattionship();

            laydate.render({
                elem: '#birthday', //指定元素
                zIndex: 99999999 //一般用于解决与其它元素的互相被遮掩的问题
                ,calendar: true //是否显示公历节日
            });
            laydate.render({
                elem: '#addParty', //指定元素
                zIndex: 99999999 //一般用于解决与其它元素的互相被遮掩的问题
                ,calendar: true //是否显示公历节日
            });

        });


        /**
         * 组织机构-过滤节点
         */
        function filterNodes(keyWord) {
            if(!keyWord.length) {
                window.alert('请先输入关键字.');
                return;
            } else {
                var $chart = $('.orgchart');
                // disalbe the expand/collapse feture
                $chart.addClass('noncollapsable');
                // 根据给定的关键字区分匹配的节点和不匹配的节点
                $chart.find('.node').filter(function(index, node) {
                    return $(node).text().toLowerCase().indexOf(keyWord) > -1;
                }).addClass('matched')
                        .closest('table').parents('table').find('tr:first').find('.node').addClass('retained');
                // 隐藏不匹配的节点
                $chart.find('.matched,.retained').each(function(index, node) {
                    $(node).removeClass('slide-up')
                            .closest('.nodes').removeClass('hidden')
                            .siblings('.lines').removeClass('hidden');
                    var $unmatched = $(node).closest('table').parent().siblings().find('.node:first:not(.matched,.retained)')
                            .closest('table').parent().addClass('hidden');
                    $unmatched.parent().prev().children().slice(1, $unmatched.length * 2 + 1).addClass('hidden');
                });
                // hide the redundant descendant nodes of the matched nodes
                $chart.find('.matched').each(function(index, node) {
                    if (!$(node).closest('tr').siblings(':last').find('.matched').length) {
                        $(node).closest('tr').siblings().addClass('hidden');
                    }
                });
            }
        }

        /**
         * 组织机构-清空过滤的结果
         */
        function clearFilterResult() {
            $('.orgchart').removeClass('noncollapsable')
                    .find('.node').removeClass('matched retained')
                    .end().find('.hidden').removeClass('hidden')
                    .end().find('.slide-up, .slide-left, .slide-right').removeClass('slide-up slide-right slide-left');
        }



       /*
       数据格式， 组织架构需要的格式
       var d = {
            'name': 'Lao Lao', //节点名
            'id': 'rootNode', //节点ID名
            'collapsed': false, //默认情况下子节点是隐藏的
            'title': 'general manager',
            'children': [
                { 'name': 'Bo Miao', 'title': 'department manager', 'className': 'middle-level',
                    'children': [
                        { 'name': 'Li Jing', 'title': 'senior engineer', 'className': 'product-dept' },
                        { 'name': 'Li Xin', 'title': 'senior engineer', 'className': 'product-dept',
                            'children': [
                                { 'name': 'To To', 'title': 'engineer', 'className': 'pipeline1' },
                                { 'name': 'Fei Fei', 'title': 'engineer', 'className': 'pipeline1' },
                                { 'name': 'Xuan Xuan', 'title': 'engineer', 'className': 'pipeline1' }
                            ]
                        }
                    ]
                }
            ]
        };*/
        /**
         * 递归获取指定用户附加用户数据
         */
        function getUserRelattionship(){

            var userId = $("#userId").val();
            if (checkNull(userId)){
                return;
            }

            var url = "/user/getUserRelattionship.php";
            $.ajax({
                url: url,
                type:"get",
                dataType:"json",
                data:{'userId': userId},
                success:function(data){
                    if (data.status == "success"){
                        var datascource = data.object;

                        $('#chart-container').orgchart({
                            'data' : datascource, //数据源用于构建组织结构图。 它可以是json对象或包含ajax请求发送到的URL的字符串。
                            'pan' : true, //如果用户启用此选项，则用户可以通过鼠标拖放来平移组织结构图。 可选
                            'zoom' : true, //如果用户启用此选项，用户可以通过鼠标滚轮缩放/缩小组织结构图。 可选
                            'zoominLimit' : 7, //允许用户设置放大限制。 可选
                            'zoomoutLimit' : 0.5, //允许用户设置缩小限制。 可选
                            'direction' : "t2b", //可用值是t2b（暗示“从上到下”，它是默认值），b2t（暗示“从下到上”），l2r（暗示“从左到右”），r2l（暗示“从右到左”）。 可选
                            //'toggleSiblingsResp' : true, //启用此选项后，用户可以通过单击左/右箭头分别显示/隐藏左/右兄弟节点。 可选
                            //'nodeTitle' : "name", //它将datasource的一个属性设置为orgchart节点的title部分的文本内容。 实际上，用户可以创建一个只有nodeTitle选项的简单orghcart。 可选
                            //'nodeId' : "id", //它将datasource的一个属性设置为每个orgchart节点的唯一标识符。 可选
                            //'parentNodeSymbol' : "glyphicon glyphicon-th-large", //使用font awesome图标表示该节点具有子节点。 可选
                            'exportButton' : true, //它启用了orgchart的导出按钮 可选
                            'exportFilename' : "${userRelation.name!''}关系图", //将当前组织图导出为图片时，它是文件名 可选
                            'exportFileextension' : "png", //可用值为png和pdf。 可选
                            'createNode': function($node, data) {
                                //颜色,关系级别
                                var orgClass = "";
                                if (!checkNull(data.className)){
                                    if (data.className == "1"){
                                        orgClass = "Love";
                                    } else if (data.className == "2"){
                                        orgClass = "friend";
                                    } else if (data.className == "3"){
                                        orgClass = "colleague";
                                    } else if (data.className == "4"){
                                        orgClass = "client";
                                    } else if (data.className == "5"){
                                        orgClass = "boss";
                                    } else if (data.className == "6"){
                                        orgClass = "stranger";
                                    } else if (data.className == "7"){
                                        orgClass = "interest";
                                    } else if (data.className == "8"){
                                        orgClass = "other";
                                    }
                                }

                                var id = data.id;
                                //按钮
                                var icoMenu = $('<span>', {
                                    'style' : 'color:#FFFF37',
                                    'class' : 'am-icon-leaf',
                                    click : function () {
                                        $(this).siblings('.second-menu').toggle();
                                    }
                                });

                                // console.log(data);
                                var imgHred = "";
                                if (checkNull(data.imgHred)){
                                    imgHred = "/img/common/worker.png";
                                } else {
                                    imgHred = "/user/getSonImgHred?id=" + data.imgHred
                                }

                                var secondMenu = '<div class=\"second-menu\">' +
                                        '<img style="width: 88px; height: 86px;"  src=' + imgHred + ' onclick=\"showingSonUserDetails(\'' + id + '\',\'' + data.name + '\')\">' +
                                        '<a href="javaScript:" style="color:#fff" class="am-success am-icon-plus-square" onclick=\"addSubsidiary(\'' + id + '\',\'' + data.name + '\')\"> 新增 </a><br/>' +
                                        // '<a href="#addAnchor" style="color:#fff" class="am-success am-icon-plus-square" )\"> 新增 </a><br/>' +
                                        '<a href="javaScript:" style="color:#fff" class="am-success am-icon-medkit" onclick=\"updSubsidiary(\'' + id + '\')\"> 修改 </a><br/>' +
                                        '<a href="javaScript:" style="color:#fff" class="am-success am-icon-scissors" onclick=\"delSubsidiaryUser(\'' + id + '\')\"> 删除 </a>' +
                                        '</div>';
                                $node.append(icoMenu).append(secondMenu);


                            },
                            'draggable' : true, //如果用户启用此选项，则可以拖放orgchart的节点。 注意：由于对HTML5拖放API的支持不足，此功能在IE上不起作用。 可选
                            'nodeContent': 'title' //它将数据源的一个属性设置为orgchart节点的内容部分的文本内容
                        });


                        //查询事件绑定
                        $('#btn-filter-node').on('click', function() {
                            filterNodes($('#key-word').val());
                        });

                        //恢复事件绑定
                        $('#btn-cancel').on('click', function() {
                            clearFilterResult();
                        });

                        //enter键处发windows事件
                        $('#key-word').on('keyup', function(event) {
                            if (event.which === 13) {
                                filterNodes(this.value);
                            } else if (event.which === 8 && this.value.length === 0) {
                                clearFilterResult();
                            }
                        });


                    } else if (data.status == 'error'){
                        alert(data.msg);
                    } else {
                        alert("未知情况");
                    }

                },
                error:function(e){
                    //关闭弹出层
                    layer.close(index);
                    alert("错误！！" + e);
                }

            });

        }


    </script>


</body>


</html>








